<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" media="screen" href="css/login.css">
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>

</head>
<body>

<!--点击空白处或 按下键盘任何一个键位 触发音乐-->
<audio src="https://jiaoyou-zyh.oss-cn-beijing.aliyuncs.com/ZhiHuanWang.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<script >
    function toggleSound() {
        let music = document.getElementById("bgmusic");//获取ID
        if (music.paused) { //判读是否播放
            music.paused=false;
            music.play(); //没有就播放
        }
    }
    setInterval("toggleSound()",1);
</script>



<!-- particles.js container -->
<div id="particles-js" style="display: flex;align-items: center;justify-content: center">
</div>
<div class="login-page" id="app">
    <div class="login-content">
        <div class="login-tit" align="center">后台登录</div>
        <div class="login-input">
            <input type="text" v-model="admin" placeholder="用户名/手机号">
        </div>
        <div class="login-input">
            <input type="password" v-model="pwd" placeholder="密码">
        </div>
        <div class="login-btn">

            <div class="login-btn-left"  align="center" @click="login()">
                <span>登入</span>
            </div>


            <div class="login-btn-right" onClick="changeImg()">
                <img src="img/check.png" alt="" id="picture"> 记住密码
            </div>

            <a href="wechatLogin.html">
        <span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <svg t="1634181103177" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg" p-id="3167" width="28" height="64">
                <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451
    29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711
     513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416
      23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618
       401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815
        23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                      fill="#28C445" p-id="3168"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277
        510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341
         2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902
          172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="3169"></path></svg>
        </span>
            </a>


        </div>

        <span align="right">
           <iframe allowtransparency="true" frameborder="0" width="255" height="64" scrolling="no"
                   src="//tianqi.2345.com/plugin/widget/index.htm?s=2&z=3&t=1&v=2&d=1&bd=0&k=&f=ffffff&ltf=009944&htf=cc0000&q=0&e=1&a=1&c=54511&w=255&h=64&align=center"></iframe>
       </span>
    </div>


    <!-- scripts -->
    <script src="js/particles.js"></script>
    <script src="js/app.js"></script>
    <script>
        function changeImg() {
            let pic = document.getElementById('picture');
            console.log(pic.src)
            if (pic.getAttribute("src", 2) == "img/check.png") {
                pic.src = "img/checked.png"
            } else {
                pic.src = "img/check.png"
            }
        }
    </script>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            admin: "",
            pwd: "",
        },
        methods: {
            //登入  传入手机号 和收到的验证码
            login() {
                axios.post("/user/login",{
                        "admin": this.admin,
                        "pwd": this.pwd,
                    }).then(resp=>{
                    //校验  返回1失败 否则成功
                    if (resp.data == "1") {
                        alert("用户名或验证码输入错误")
                    } else {
                        //成功跳转后台主页
                        location.href = "/backstage/admin/index/index.html";
                    }

                });
            }
        },
    })
</script>







</body>
</html>